<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebPost</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <!-- <h1>WebPost</h1> -->
      <div class="tabs">
        <button id="tab-current" class="tab active">接口调试</button>
        <button id="tab-requests" class="tab">网站接口</button>
        <button id="tab-saved" class="tab">已保存</button>
      </div>
    </header>

    <div id="current-request" class="tab-content active">
      <div class="request-info">
        <div class="request-name-container">
          <input type="text" id="request-name" class="request-name-input" placeholder="请求名称">
          <button id="save-button" class="save-button">保存</button>
        </div>
        <div class="url-container">
          <select id="method" class="method-select">
            <option value="GET">GET</option>
            <option value="POST">POST</option>
            <option value="PUT">PUT</option>
            <option value="DELETE">DELETE</option>
            <option value="PATCH">PATCH</option>
            <option value="OPTIONS">OPTIONS</option>
            <option value="HEAD">HEAD</option>
          </select>
          <input type="text" id="url" class="url-input" placeholder="请输入URL">
          <button id="send-button" class="send-button">发送</button>
        </div>
      </div>

      <div class="request-tabs">
        <button class="request-tab active" data-tab="params">参数</button>
        <button class="request-tab" data-tab="headers">请求头</button>
        <button class="request-tab" data-tab="body">请求体</button>
      </div>

      <div id="params-content" class="request-content active">
        <div class="params-container">
          <div class="param-row header-row">
            <div class="checkbox-cell"><input type="checkbox" checked></div>
            <div class="key-cell">键</div>
            <div class="value-cell">值</div>
            <div class="action-cell"></div>
          </div>
          <div id="params-list"></div>
          <button id="add-param" class="add-button">添加参数</button>
        </div>
      </div>

      <div id="headers-content" class="request-content">
        <div class="headers-container">
          <div class="header-row header-row">
            <div class="checkbox-cell"><input type="checkbox" checked></div>
            <div class="key-cell">键</div>
            <div class="value-cell">值</div>
            <div class="action-cell"></div>
          </div>
          <div id="headers-list"></div>
          <button id="add-header" class="add-button">添加请求头</button>
        </div>
      </div>

      <div id="body-content" class="request-content">
        <div class="body-type-selector">
          <select id="body-type">
            <option value="none">无</option>
            <option value="form-data">form-data</option>
            <option value="x-www-form-urlencoded">x-www-form-urlencoded</option>
            <option value="raw">raw</option>
            <option value="binary">binary</option>
          </select>
        </div>
        <div id="body-editor"></div>
      </div>

      <div class="response-section">
        <div class="response-header">
          <h3>响应</h3>
          <span id="status-code" class="status-code"></span>
          <span id="response-time" class="response-time"></span>
        </div>
        <div class="response-tabs">
          <button class="response-tab active" data-tab="response-body">正文</button>
          <button class="response-tab" data-tab="response-headers">响应头</button>
        </div>
        <div id="response-body-content" class="response-content active">
          <pre id="response-body"></pre>
        </div>
        <div id="response-headers-content" class="response-content">
          <div id="response-headers-list"></div>
        </div>
      </div>
    </div>

    <div id="requests-request" class="tab-content">
      <div class="site-info">
        <h3>当前网站</h3>
        <button id="refresh-requests" class="refresh-button">刷新</button>
      </div>
      <div class="site-url-wrapper">
        <div class="site-url-container">
          <div id="site-url" class="site-url-text"></div>
          <button id="copy-url" class="copy-url-button" title="复制URL">
            <span class="copy-icon">&#128203;</span>
          </button>
        </div>
        <div id="copy-feedback" class="copy-feedback">已复制到剪贴板</div>
      </div>
      <div class="requests-container">
        <div class="requests-toolbar">
          <input type="text" id="filter-requests" class="filter-input" placeholder="筛选请求...">
          <select id="filter-method" class="filter-select">
            <option value="">全部方法</option>
            <option value="GET">GET</option>
            <option value="POST">POST</option>
            <option value="PUT">PUT</option>
            <option value="DELETE">DELETE</option>
            <option value="PATCH">PATCH</option>
          </select>
          <select id="filter-type" class="filter-select">
            <option value="all">全部类型</option>
            <option value="fetch-xhr">Fetch/XHR</option>
            <option value="css">CSS</option>
            <option value="js">JS</option>
            <option value="img">图片</option>
            <option value="other">其他</option>
          </select>
          <button id="clear-requests" class="clear-button">清空</button>
        </div>
        <div class="requests-list-header">
          <div class="request-method">方法</div>
          <div class="request-url">URL</div>
          <div class="request-status">状态</div>
          <div class="request-type">类型</div>
          <div class="request-time">时间</div>
          <div class="request-debug">操作</div>
        </div>
        <div id="requests-list" class="requests-list"></div>
        <div class="empty-state requests-empty-state">当前页面没有捕获到请求</div>
      </div>
    </div>

    <div id="saved-requests" class="tab-content">
      <div class="saved-list">
        <div class="saved-search-container">
          <input type="text" id="search-saved-requests" class="search-input" placeholder="搜索已保存的请求...">
        </div>
        <div class="saved-list-header">
          <div class="saved-method">方法</div>
          <div class="saved-name">名称</div>
          <div class="saved-url">URL</div>
          <div class="saved-actions">操作</div>
        </div>
        <div id="saved-requests-list"></div>
        <div class="empty-state">没有保存的请求</div>
      </div>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html> 